<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>文件列表展示</title>
    <link rel="stylesheet" href="${ctx}/static/layui/css/layui.css">
    <link rel="stylesheet" href="${ctx}/static/layui/css/bootstrap.min.css">
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <%@ include file="/WEB-INF/commons/navbar.jsp" %>
    <%@ include file="/WEB-INF/commons/menu.jsp" %>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">

                <form action="${ctx}/admin/queryFiles">

                        <div class="input-group">
                            <input type="text" name="title" class="form-control" placeholder="请输入关键字...">
                            <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">搜索</button>
                        </span>
                        </div>

                </form>

            <div>
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th bgcolor="#dae0e4" style="font-weight: bold;text-align: center">文件标题</th>
                        <th bgcolor="#dae0e4" style="font-weight: bold;text-align: center">文件大小</th>
                        <th bgcolor="#dae0e4" style="font-weight: bold;text-align: center">下载次数</th>
                        <th bgcolor="#dae0e4" style="font-weight: bold;text-align: center">更新时间</th>
                        <th bgcolor="#dae0e4" style="font-weight: bold;text-align: center">文件详情</th>
                        <th bgcolor="#dae0e4" style="font-weight: bold;text-align: center">文件下载</th>
                        <th bgcolor="#dae0e4" style="font-weight: bold;text-align: center">文件删除</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${filesList}" var="file">
                        <tr>
                            <td style="text-align: center">${file.fileName}</td>
                            <td style="text-align: center"><span style="color:orangered">${file.fileSize} </span>KB</td>
                            <td style="text-align: center"><span style="color:dodgerblue">${file.downloadCount}</span> 次
                            </td>
                            <td style="text-align: center">${file.uploadTime}</td>
                            <td style="text-align: center"><a href="${ctx}/user/viewPic?id=${file.id}"><span
                                    style="color:dodgerblue">查看详情</span></a></td>
                            <td style="text-align: center"><a href="${ctx}/download/downloadFile?id=${file.id}"><span
                                    style="color:dodgerblue">下载文件</span></a></td>
                            <td style="text-align: center"><a href="${ctx}/download/deleteThisFile?id=${file.id}"
                                                              onclick="return window.confirm('请确认是否删除？')"><span
                                    style="color:dodgerblue">删除文件</span></a></td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>

            <div id="pageInfo" align="right"></div>

        </div>
    </div>
</div>


<script src="${ctx}/static/layui/layui.js"></script>

<script type="text/javascript">


    layui.config({
        base:${ctx} /
    }).use(['element', 'layer', 'jquery', 'laypage'], function () {
        var element = layui.element, layer = layui.layer, $ = layui.jquery, laypage = layui.laypage;
        laypage.render({
            elem: 'pageInfo'
            , count: ${count} //数据总数，从服务端得到
            , limits: [10, 20, 30, 40]
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            , curr: ${curr}
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                //console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    window.location.href = '${ctx}/user/showAllFiles?start=' + obj.curr + '&size=' + obj.limit;
                }
            }
        });

    });


</script>

</body>
</html>
